<template>
    <u-popup v-model="isShow" :closeIconColor="'#ffffff'"
        :borderRadius="20" mode="bottom" 
        :mask-close-able="true" 
        :safe-area-inset-bottom="true"
        :closeable="true">
        <view class="title">
            奖品列表
        </view>
        <scroll-view scroll-y="true"  class="popupContainer">
            <template v-if="(activityType==1||activityType==2||activityType==3)&&myAwardList.length>0">
                <view class="awardItem" v-for="(item,index) in myAwardList" :key="index">
                    <view class="left">
                        <image class="icon" :src="item.awardInfo.cover" mode=""></image>
                        <view class="text">
                            {{item.awardInfo.grade}} {{item.awardInfo.name}}
                        </view>
                    </view>
                    <view class="right" v-if="item.isCheck==false" @click="gotoActivityCheck(item)">
                        核销
                    </view>
                    <view class="rightDis" v-else>
                        已核销
                    </view>
                </view>
            </template>

            <template v-if="(activityType==5||activityType==6)&&myAwardList.length>0">
                <view class="couponItemContainer">
                    <view v-for="(item,index) in myAwardList" :key="index" class="couponItem">
                        <view class="couponWrapper">
                            <image class="left" src="/pages/client/static/image/icon_daijinquan.png" mode=""></image>
                            <view class="middle">
                            </view>
                            <view class="right">
                                {{item.awardInfo.name}}
                            </view>
                        </view>
                        <view v-if="item.isCheck" class="btn" style="color: #999999;background-color: #E1E1E1;">
                            已核销
                        </view>
                        <view v-else class="btn" @click="gotoActivityCheck(item)">
                            核销
                        </view>
            
                    </view>
                </view>
            </template>
        

      
            <view class="nonePage" v-if="myAwardList.length==0&&isShowNone">
                <image class="img" src="/pages/client/static/image/user_img_n.png" mode=""></image>
                <view class="tip">
                    {{tipList[activityType]}}
                </view>
                <view class="btn" @click="gotoBack">
                    立即参与
                </view>
                <view class="" style="height: 200rpx;">
                    
                </view>
            </view>
            <view v-else class="" style="height: 50rpx;">
                
            </view>
        </scroll-view>
        <popupUserInfoAuth v-model="isShowUserInfoAuth">
        </popupUserInfoAuth>
        
        <popupPhoneAuth v-model="isShowPhoneAuth">
        </popupPhoneAuth>
    </u-popup>
</template>

<script>
    const api = require("@/static/js/api.js")
	import popupUserInfoAuth from '@/components/popupUserInfoAuth/index.vue'
	import popupPhoneAuth from '@/components/popupPhoneAuth/popupPhoneAuth.vue'
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    let that = null


    export default {
        components: {
        	popupUserInfoAuth,
        	popupPhoneAuth,
        },
        props: {
           activityId:{
               default:'',
               type:String
           },
           activityType: {
               default:'',
               type:String
           },      
           value:{
               default:false,
               type: Boolean
           } 
        },
        data() {
            return {
                isShow: false,
                activityCheckId: '',
                isShowUserInfoAuth: false,
                isShowPhoneAuth: false,
                
                isMustAuthUserInfo: true,
                isMustAuthPhone: true,
                
                myAwardList: [],
                isShowNone: false,
                tipList: [
                    '',
                    '很遗憾，您还未中奖哦~',
                    '很遗憾，您还未拼团成功哦~',
                    '很遗憾，您还未完成点赞哦~',
                    '很遗憾，您还未完成报名哦~',
                    '很遗憾，您还未领优惠券哦~',
                    '很遗憾，您还未砍价成功哦~',
                ],
                tabTitleList: [
                    '',
                    '我的奖品',
                    '我的团购券',
                    '我的点赞',
                    '我的报名',
                    '我的优惠券',
                    '我的奖品'
                ]
            };
        },
        watch: {
            value: {
                handler: function observer(val) {
                    this.isShow = val;
                    if (val){
                        this.getCurrentActivityAward();
                    }
                },
                immediate: true
            },
            isShow:{
                handler: function observer(val) {
                    var _this = this;
                    this.$emit('input', val)
                },
                immediate: true
            }
        },
        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
                isSeller: state => state.userInfo.isSeller,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },
        mounted() {
            // that.getCurrentActivityAward();
        },

        methods: {
            ...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId', "setOrigin"]),
            
            getCurrentActivityAward() {
                let that = this
                console.log("getCurrentActivityAward")
                api.getCurrentActivityAward({
                    param: {
                        activityId: that.activityId,
                    }
                }).then(res => {
                    console.log(res)
                    if (res.success) {
                        for (var i = 0; i < res.data.length; i++) {
                            if (that.activityType == 1) {
                                res.data[i].awardInfo = {};
                                res.data[i].awardInfo.cover = res.data[i].lotteryAward.cover
                                res.data[i].awardInfo.grade = res.data[i].lotteryAward.grade
                                res.data[i].awardInfo.name = res.data[i].lotteryAward.name
                            } else if (that.activityType == 3||that.activityType == 2){
                                res.data[i].awardInfo = {};
                                res.data[i].awardInfo.cover = res.data[i].award&&res.data[i].award.imgPath||''
                                res.data[i].awardInfo.grade = ""
                                res.data[i].awardInfo.name = res.data[i].presentName||''
                            } else if (that.activityType == 5||that.activityType == 6) {
                                res.data[i].awardInfo = {};
                                res.data[i].awardInfo.name = res.data[i].presentName||''
                            }
                        }
                        that.isShowNone = true;
                        that.myAwardList = res.data;
                    }
                })
            },
            gotoActivityCheck(item){
                this.activityCheckId = item.id
                if (!this.isAuthPhone){
                    this.isShowPhoneAuth = true;
                }else if (!this.isAuthUserInfo){
                    this.isShowUserInfoAuth = true;
                }else{
                    uni.navigateTo({
                        url:'/pages/client/activity/activityCheck?id='+this.activityCheckId 
                    })
                }
            },
            gotoBack() {
                this.isShow = false;
                this.$emit('input', false);
            },
            
            onUserInfoAuthConfirm() {
            	let that = this;
            	uni.navigateTo({
            	    url:'/pages/client/activity/activityCheck?id='+this.activityCheckId 
            	})
            },
            onUserInfoAuthCancel() {
            	let that = this;				
	
            },
            onPhoneAuthConfirm() {
            	let that = this;
                if (!this.isAuthUserInfo){
                    this.isShowUserInfoAuth = true;
                }else{
                    uni.navigateTo({
                        url:'/pages/client/activity/activityCheck?id='+this.activityCheckId 
                    })
                }  	
            },
            onPhoneAuthCancel() {
            	let that = this;	
            },
        }
    }
</script>

<style lang="scss" scoped>
    .popupContainer{
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 750rpx;
        height: 850rpx;
        position: relative;
    }
    .title{
        width: 750rpx;
        height: 100rpx;
        line-height: 100rpx;
        letter-spacing: 5rpx;
        text-align: center;
        color: #FFFFFF;
        font-size: 32rpx;
        background-color: #F6784C;
        font-weight: bold;
        position: relative;
    }
    .couponItemContainer {
        width: 750rpx;
        background: #FFFFFF;
        padding: 0 32rpx 0 32rpx;
        // margin-top: 30rpx;
        .couponItem {
            display: flex;
            align-items: center;
            margin-top: 32rpx;
            .couponWrapper {
                width: 480rpx;
                height: 116rpx;
                background: #5E9FFD;
                box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
                border-radius: 20rpx;
                display: flex;

                align-items: center;
                justify-content: space-between;

                .left {
                    width: 80rpx;
                    height: 80rpx;
                    margin-left: 23rpx;
                    margin-right: 23rpx;
                }

                .middle {
                    height: 116rpx;
                    width: 0;
                    border-left: 1px #FFFFFF dashed;
                }

                .right {
                    width: 350rpx;
                    text-align: center;
                    font-size: 32rpx;
                    font-weight: 600;
                    color: #FFFFFF;
                    line-height: 56rpx;
                    padding: 0 15rpx;
                }
            }

            .btn {
                width: 180rpx;
                height: 80rpx;
                background: #F6784C;
                border-radius: 20rpx;
                margin-left: 30rpx;
                color: #FFFFFF;
                line-height: 80rpx;
                text-align: center;
            }
        }
    }

    .awardItem {
        width: 690rpx;
        height: 128rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        margin-top: 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx;

        .left {
            font-size: 28rpx;
            color: #333333;
            line-height: 40rpx;
            display: flex;
            align-items: center;

            .icon {
                width: 88rpx;
                height: 88rpx;
                margin-right: 30rpx;
            }

            .text {
                width: 300rpx;
            }
        }

        .right {
            width: 140rpx;
            height: 64rpx;
            background: #F6784C;
            border-radius: 48rpx;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 64rpx;
            text-align: center;
        }

        .rightDis {
            width: 140rpx;
            height: 64rpx;
            background: #E1E1E1;
            border-radius: 48rpx;
            font-size: 28rpx;
            color: #999999;
            line-height: 64rpx;
            text-align: center;
        }
    }

    .nonePage {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;

        .img {
            margin-top: 78rpx;
            width: 394rpx;
            height: 285rpx;
        }

        .tip {
            margin-top: 34rpx;
            height: 31rpx;
            font-family: MicrosoftYaHei;
            font-size: 30rpx;
            color: #666666;
        }

        .btn {
            margin-top: 47rpx;
            width: 200rpx;
            height: 74rpx;
            background-color: #ff7927;
            border-radius: 10rpx;
            text-align: center;
            line-height: 74rpx;
            color: #ffffff;
        }
    }
</style>
